<template>
	<view class="search">

		<view class="header" v-if="pageType==1">
			<headerSearch ref="searchBox" style="width: 100%;" bg-color="#EEEEEE" @searchBlur="searchBlur"></headerSearch>
			<!-- <button v-if="!isSou" @click="search"></button> -->
			<!-- <view class="btn" @click="search">
				搜索
			</view> -->
		</view>
		<!-- <view class="history" v-if="!isSou">
			<view class="title">
				<text>搜索记录</text>
				<image src="@/static/image/search_del.png" @click="delRlist" mode="widthFix"></image>
			</view>
			<view class="h-list">
				<view class="item" v-for="(item,i) in r_list" :key="i" @click="r_click(item.text)">
					{{item.text}}
				</view>
			</view>
		</view> -->

		<view class="screen" v-if="course_type!=2">
			<view class="tab">
				<view class="tab-item" :class="tab==1 ? 'select' : ''" @click="tabClick(1)">
					<text>综合</text>
				</view>
				<view class="tab-item" :class="tab==2 ? 'select' : ''" @click="tabClick(2)">
					<text>价格</text>
					<image v-if="sort_price==1" :src="$img_path('/course/sort_1.png')" mode="widthFix"></image>
					<image v-if="sort_price==2" :src="$img_path('/course/sort_2.png')" mode="widthFix"></image>
				</view>
				<view class="tab-item" :class="tab==3 ? 'select' : ''" @click="tabClick(3)">
					<text>销量</text>
					<image v-if="sort_num==1" :src="$img_path('/course/sort_1.png')" mode="widthFix"></image>
					<image v-if="sort_num==2" :src="$img_path('/course/sort_2.png')" mode="widthFix"></image>
				</view>
				<view class="tab-item box-style" @click="tabClick(4,box_style)">
					<image v-if="box_style==1" :src="$img_path('/course/s_i_1.png')" mode="widthFix"></image>
					<image v-if="box_style==2" :src="$img_path('/course/s_i_2.png')" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="p-list">
			<goodsBox class="item" 
				v-for="(item,i) in c_list" 
				:key="item.id" :style="{width: box_style==1 ? 'calc(50% - 7rpx)' : '100%'}" 
				:goodsDetail="item"
				:imageStyle="box_style==2 ? {width:'232rpx',height:'232rpx'} : null" 
				:styleType="box_style"
				clickType="2"
				@goodsClick="goodsClick(item)">
				<text slot="center">{{course_type==2 ? item.enroll_count : item.play_count}}{{ course_type==2 ? '人订阅' : '人已报名'}}</text>
			</goodsBox>
		</view>
	</view>
</template>

<script>
	import {classify, lists, offline_course} from '@/utils/api/courseApi.js'
	import headerSearch from '@/components/header-search/header-search.vue'
	import goodsBox from '../../components/service-box/goods-box.vue';
	export default {
		components: {
			headerSearch,
			goodsBox
		},
		data() {
			return {
				navTitle:'',
				course_type:1,//1线上，2线下
				pageType:null,
				isSou: false,
				r_list: [],
				name: '',
				sort_price: 1,
				sort_num: 1,
				tab:1,
				box_style:1,
				searchValue: '',
				c_list:[],
				page:1,
				total:0,
				last_page:0
			};
		},
		onLoad(data) {
			this.navTitle = data.title
			uni.setNavigationBarTitle({
				title:data.title
			})
			this.course_type = data.courseType
			this.pageType = data.type
			if(data.content){
				this.searchValue = data.content
			}else{
				this.searchValue = ''
			}
			if(data.classify){
				
			}
			if(this.course_type!=2){
				this.getLists()
			}else{
				this.getOfflineList()
			}
		},
		onShow() {
			// this.getRlist()
			
		},
		mounted() {
			console.log(this.$refs)
			this.$refs.searchBox.inputValue = this.searchValue
		},
		onReachBottom() {
			if(this.last_page>this.page){
				this.page++
				
				if(this.course_type!=2){
					this.getLists()
				}else{
					this.getOfflineList()
				}
			}
		},
		methods: {

			getRlist() {
				if (uni.getStorageSync('r_list_mall')) {
					this.r_list = JSON.parse(uni.getStorageSync('r_list_mall'))
				} else {
					this.r_list = []
				}
			},
			
			getLists(){
				let obj={
					category_id:'',
					q:this.searchValue,
					sort_name:this.tab=='2'?'salesprice':this.tab=='3'?'basic_num':'',
					sort_order:this.tab=='2'?(this.sort_price==1?'DESC':'ASC'):this.tab=='3'?(this.sort_num==1?'DESC':'ASC'):'',
					page:this.page
				}
				uni.showLoading()
				lists(obj).then(res=>{
					// console.log(res,'---')
					if(this.page==1){
						this.c_list = res.data.data
					}else{
						this.c_list = [...res.data.data,...this.c_list]
					}
					this.total = res.data.total
					this.last_page = res.data.last_page
					uni.hideLoading()
				})
			},
			
			// 线下课程列表
			getOfflineList(){
				let obj={
					q:this.searchValue,
					page:this.page
				}
				uni.showLoading()
				offline_course(obj).then(res=>{
					if(this.page==1){
						this.c_list = res.data.data
					}else{
						this.c_list = [...res.data.data,...this.c_list]
					}
					this.total = res.data.total
					this.last_page = res.data.last_page
					uni.hideLoading()
				})
			},
			
			
			
			goodsClick(data){
				if(this.course_type==2){
					uni.navigateTo({
						url:`/pagesCourse/webview/webview?url=pagesCourse/classify/offline_detail&id=${data.id}`
					})
				}else{
					uni.navigateTo({
						url:`/pagesCourse/webview/webview?url=pagesCourse/classify/detail&id=${data.id}`
					})
				}
				
			},
			
			// goodsClick(val){
			// 	console.log(val,'-')
			// 	if(this.course_type==2){
			// 		uni.navigateTo({
			// 			url:'/pagesCourse/classify/offline_detail?id='+val.id
			// 		})
			// 	}else{
			// 		uni.navigateTo({
			// 			url:'/pagesCourse/classify/detail?id='+val.id
			// 		})
			// 	}
			// },
			
			searchBlur(val) {
				this.searchValue = val.detail.value
				if(this.course_type!=2){
					this.getLists()
				}else{
					this.getOfflineList()
				}
			},
			tabClick(type,val){
				switch (type){
					case 1:
						break;
					case 2:
						if(this.tab==type){
							if(this.sort_price == 1){
								this.sort_price = 2
							}else{
								this.sort_price = 1
							}
						}
						break;
					case 3:
						if(this.tab==type){
							if(this.sort_num == 1){
								this.sort_num = 2
							}else{
								this.sort_num = 1
							}
						}
						break;
					default:
						if(this.box_style==1){
							this.box_style = 2
						}else{
							this.box_style = 1
						}
						break;
				}
				if(type!=4){
					this.tab = type
				}
				if(this.course_type!=2){
					this.getLists()
				}else{
					this.getOfflineList()
				}
			},

			search() {

				if (this.searchValue && this.r_list.filter((e) => {
						return e.text == this.searchValue
					}).length < 1) {
					this.r_list.push({
						text: this.searchValue
					})
					uni.setStorageSync('r_list_mall', JSON.stringify(this.r_list))
				}

				this.getGoods()
			},
			close() {
				this.name = ''
				// this.getGoods()
				// this.getRlist()
			},
			r_click(text) {
				this.name = text
				// this.getGoods()
			},
			delRlist() {
				uni.showModal({
					content: '确定删除历史记录？',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync('r_list_mall')
							if(this.course_type!=2){
								this.getLists()
							}else{
								this.getOfflineList()
							}
						}
					}
				})

			}
		}
	}
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.search {
		box-sizing: border-box;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			z-index: 9;
			padding: 20rpx 30rpx 0;
			// background-color: #FFFFFF;

			.btn {
				width: 86rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FD845C;
				text-align: right;
			}
		}

		.history {
			margin-top: 40rpx;
			padding: 0 30rpx;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				image {
					width: 40rpx;
					height: 42rpx;
				}
			}

			.h-list {
				width: calc(100% + 15rpx);
				display: flex;
				flex-wrap: wrap;

				.item {
					min-width: 136rpx;
					height: 64rpx;
					margin-right: 17rpx;
					background-color: #F5F5F5;
					border-radius: 30rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 64rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
					padding: 0 20rpx;
					box-sizing: border-box;
					margin-top: 40rpx;
				}
			}
		}

		.s-drow {
			position: relative;
		}

		.screen {
			padding: 30rpx 30rpx 0;

			.tab {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16rpx 24rpx 14rpx;
				// background-color: #FFFFFF;
				border-radius: 10rpx;
				// margin-bottom: 32rpx;
				.tab-item {
					display: flex;
					justify-content: center;
					align-items: center;
					text {
						font-weight: bold;
						font-size: 32rpx;
						color: #999999;
						line-height: 44rpx;
					}
					&.select {
						text {
							color: #E72A2A;
						}
					}

					image {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}

		.p-list {
			padding: 24rpx 30rpx 64rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
	}
</style>